<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="./src/css/base.css">
  <link rel="stylesheet" href="./src/css/video.css">
</head>

<body>
  <div class="view">
    <!-- 头部下载 -->
    <div class="home_top clearfix">
      <div class="home_title">
        <img src="./src/images/bm.png" alt="">
        <div class="game_title">
          <h4>王者荣耀</h4>
          <p>王者相见,打成一片</p>
        </div>
      </div>
      <div class="home_down">
        <img src="./src/images/down.png
      " alt="">
      </div>
    </div>

    <!-- 轮播图 -->
    <div class="wz_carousel">
      <div class="carousel_item clearfix">
        <a href="javascript:;"> <img src="./src/mork_images/lb21.jpg" alt=""> <div class="des">[王者荣耀] 04干将三百里开外射爆敌方!</div> </a>
        <a href="javascript:;"> <img src="./src/mork_images/lb21.jpg" alt=""> <div class="des">王者猴教学</div> </a>
        <a href="javascript:;"> <img src="./src/mork_images/lb21.jpg" alt=""> <div class="des">王者猴教学</div> </a>
      </div>
    </div>

    <!-- 视频标题 -->
    <div class="video_title clearfix">
      <a class="current_li" href="javascript:;"><span class="vt_font">赛事</span><span class="vt_img"></span></a>
      <a href="javascript:;"><span class="vt_font">英雄</span><span class="vt_img"></span></a>
      <a href="javascript:;"><span class="vt_font">解说</span><span class="vt_img"></span></a>
      <a href="javascript:;"><span class="vt_font">娱乐</span><span class="vt_img"></span></a>
      <a href="javascript:;"><span class="vt_font">官方</span><span class="vt_img"></span></a>
    </div>

    <!-- 视频内容 -->
    <div class="video_list clearfix"></div>

    <!-- 加载更多 -->
    <div class="more">
      <a href="javascript:;"   >点击加载更多</a>
    </div>

    <footer class="clearfix">
      <a href="index.html"></a>
      <a href="./video.html"></a>
      <a href="./strategy.html"></a>
      <a href="./match.html"></a>
    </footer>
  </div>
  <script src="./lib/jquery.1.12.4.js"></script>
  <script>
    $(function () {
      var urlObj={
        pageSize:6,
        typelevel1:"赛事"
      };
      addEvent();
      loadVideos(urlObj);
      function addEvent() {
        $(".video_title>a").click(function () {
          $(this).addClass("current_li").siblings().removeClass("current_li");
          var  typelevel1=$(this).find(".vt_font").html();
          urlObj.typelevel1=typelevel1;
          loadVideos(urlObj);
        });

        $('.more>a').click(function(){
          urlObj.pageSize+=6;
          loadVideos(urlObj);
        });
      }

      function loadVideos(o) {
        $.get("http://139.199.192.48:9092/api/getvideos?typelevel1="+urlObj.typelevel1+"&pageIndex=1&pageSize="+o.pageSize,
          function (result) {
            if (result.status == 0) {
              // 查询成功
              var datas = result.message;

              var htmlArr = [];
              for (var i = 0; i < datas.length; i++) {
                var obj = datas[i];
                htmlArr.push('<a href="'+obj.url+'">');
                htmlArr.push(' <img src="' + obj.img + '" alt="">');
                htmlArr.push(' <span class="v_play"></span>');
                htmlArr.push(' <div class="v_title">' + obj.title + '</div>');
                htmlArr.push(' <div class="v_info">');
                htmlArr.push(' <p class="v_left clearfix">');
                htmlArr.push('  <span></span>');
                htmlArr.push(obj.playnumber);
                htmlArr.push('  </p>');
                htmlArr.push('  <p class="v_right">' + obj.cdate + '</p>');
                htmlArr.push(' </div>');
                htmlArr.push('  </a>');
              }
              $(".video_list").html(htmlArr.join(''));
            }
          });
      }
    });
  </script>
</body>

</html>